<template>
  <main-card-admin
    :title="`应用详情（${appInfo.name || ''})`"
    :crumbs="crumbs"
    :loading="loading"
    :screen-style-obj="computedScreenStyleObj"
  >
    <div class="details-content">
      <div class="review-card">
        <div class="card1">
          <div class="card1-item">
            <div class="item-title">用户名称</div>
            <div class="item-content" :title="appInfo.username">{{ appInfo.username }}</div>
          </div>
          <div class="card1-item">
            <div class="item-title">应用名称</div>
            <div class="item-content" :title="appInfo.name">{{ appInfo.name }}</div>
          </div>
          <div class="card1-item">
            <div class="item-title">申请时间</div>
            <div class="item-content" :title="appInfo.createTime">{{ appInfo.createTime }}</div>
          </div>
        </div>
        <div class="card2">
          <div class="row-title">应用描述</div>
          <div class="row-content" :title="appInfo.content">
            {{ appInfo.content || '/' }}
          </div>
        </div>
      </div>
      <information-form
        ref="informationFormRef"
        :audit-app-api="appInfo.auditAppApiVOList"
        :audit-app-sdk="appInfo.auditAppSdkVOList"
        @getClientInfo="getClientInfo()"
      />
      <div class="button-group">
        <a-button style="width: 88px; height: 44px; font-size: 16px" @click.stop="openClient()">通过</a-button>
        <a-button style="width: 88px; height: 44px; font-size: 16px" @click.stop="openDisableModal()">驳回</a-button>
      </div>
    </div>
  </main-card-admin>
  <!-- 详情弹窗 -->
  <message-authorization
    v-model:show="showAuditModal"
    title="通过审核"
    msg="以下服务暂不支持授权，请确认应用是否通过审核"
    ok-text="确定"
    :data="authorizationPopData"
    @ok="confirmApproval"
  />
  <message-dialog
    v-model:show="showDisableModal"
    title="驳回审核"
    msg="此应用申请将被驳回，请确认操作！"
    label="请填写驳回原因"
    ok-text="确定"
    :del-task-loading="turnLoading"
    @ok="disableClient"
  />
</template>
<script lang="ts" setup>
  import { message } from 'ant-design-vue'
  import { debounce } from 'g6-fn'
  import { computed, ref } from 'vue'
  import { useRequest } from 'vue-request'
  import { useRoute, useRouter } from 'vue-router'

  import MessageAuthorization from '@/components/MessageAuthorization/index.vue'
  import MessageDialog from '@/components/MessageDialog/index.vue'
  import { applicationAuditApi } from '@/services/api'

  import InformationForm from '../../components/InformationForm.vue'
  import { AuditDetails } from '../../types'
  const route = useRoute()
  const router = useRouter()
  const { id } = route.params as { id: string }
  const informationFormRef = ref()

  const crumbs = computed(() => {
    return [{ path: '/admin/app-check/check-list/list', name: `应用审核` }, { name: `应用详情（${appInfo.value.name || ''})` }]
  })
  const computedScreenStyleObj = computed(() => {
    return {
      padding: '0 32px 0 32px'
    }
  })
  const appInfo = ref<AuditDetails>({})

  const { loading, runAsync: getClientInfo } = useRequest<any>(applicationAuditApi.detail(id), {
    onSuccess: res => {
      const { data } = res
      Object.assign(appInfo.value, data)
    },
    onError: () => {}
  })

  const showDisableModal = ref(false)

  const authorizationPopData = ref<string[]>([])
  const showAuditModal = ref(false)

  const openClient = debounce(async () => {
    loading.value = true
    try {
      const { data, code, message: resMessage } = await applicationAuditApi.approved({ id, flag: false }, { noJudgeCode: true })
      console.log(data, 'data')
      if (code === 'WAREHOUSE-100020' && data.length) {
        authorizationPopData.value = data
        showAuditModal.value = true
      } else if (code !== 'SYSTEM-100000') {
        message.error(resMessage)
      } else {
        message.success('操作成功')
        router.push({
          path: '/admin/app-check/check-list/list'
        })
      }
      loading.value = false
    } catch {
      loading.value = false
    }
  }, 500)

  const openDisableModal = async () => {
    showDisableModal.value = true
  }

  const confirmApproval = debounce(async () => {
    await applicationAuditApi.approved({ id, flag: true })
    showAuditModal.value = false
    message.success('操作成功')
    router.push({
      path: '/admin/app-check/check-list/list'
    })
  }, 500)

  const turnLoading = ref(false)
  const disableClient = debounce(async (text: string) => {
    turnLoading.value = true
    try {
      await applicationAuditApi.reviewRejection({ id, rejectReason: text })
      showDisableModal.value = false
      message.success('操作成功')

      router.push({
        path: '/admin/app-check/check-list/list'
      })
      turnLoading.value = false
    } catch {
      turnLoading.value = false
    }
  }, 500)
</script>

<style lang="less" scoped>
  :deep(.ant-collapse > .ant-collapse-item-active:last-child > .ant-collapse-header) {
    border-radius: 0;
  }

  .ant-form-item:last-child {
    margin-bottom: 12px !important;
  }

  :deep(.ant-collapse) {
    overflow: hidden;
    // margin-top: 24px;
    width: 100%;
    border-radius: 6px;

    :deep(.ant-collapse-header) {
      background-color: #fff;
    }

    :deep(.ant-collapse-content-box) {
      padding: 0;
    }
  }

  :deep(.error-input) {
    border: 1px solid #f00;
  }

  :deep(.ant-collapse > .ant-collapse-item:last-child) {
    border-radius: 6px;
  }

  :deep(.ant-tabs) {
    .ant-tabs-tab {
      padding: 0;
      padding-bottom: 6px;
    }

    .ant-tabs-tab.ant-tabs-tab-active {
      .ant-tabs-tab-btn {
        color: @text01;
        font-weight: 700;
      }
    }

    .ant-tabs-ink-bar {
      height: 3px;
    }
  }

  :deep(.ant-tabs-top > .ant-tabs-nav) {
    &::before {
      border-bottom: none;
    }
  }
  // .ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn
  :deep(.ant-table-wrapper .ant-table:not(.ant-table-bordered) .ant-table-tbody > tr:last-child > td) {
    border-bottom: none;
  }

  :deep(.ant-table-thead > tr > th) {
    padding: 0 16px;
    height: 32px;
    font-size: 12px;
    background-color: @background2;
    border: none;
    font-weight: 400;
  }

  :deep(.ant-table-tbody > tr > td) {
    height: 38px;
  }

  :deep(.ant-table-wrapper .ant-table.ant-table-small .ant-table-thead > tr > th) {
    padding: 0 16px;
    height: 32px;
    font-size: 12px;
    border: none;
    font-weight: 400;
  }

  :deep(.ant-table-wrapper) {
    .ant-table {
      border: none;
    }
  }

  :deep(.ant-table-wrapper .ant-table.ant-table-small .ant-table-tbody > tr > td) {
    padding: 0 16px;
  }

  .collapse-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  :deep(.ant-checkbox-group) {
    gap: 20px 16px;
  }

  .details-content {
    position: relative;
    display: flex;
    padding: 20px 20px 32px;
    margin: 0 auto;
    margin-bottom: 28px;
    margin-left: 250px;
    width: 904px;
    // width: 904px;
    background: #f5f5f5;
    border-radius: 8px;
    flex-direction: column;
    // gap: 24px;

    .review-card {
      display: flex;
      align-items: flex-start;
      padding: 20px 20px 32px;
      margin-bottom: 24px;
      width: 100%;
      background: #fff;
      border-radius: 8px;
      flex-direction: column;
      gap: 20px;

      .card1 {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 54px;
        flex-direction: row;
        gap: 20px;

        .card1-item {
          display: flex;
          justify-content: space-evenly;
          width: 200px;
          height: 100%;
          flex-direction: column;
          gap: 8px;

          .item-title {
            font-size: 14px;
            color: rgba(25, 25, 48, 0.45);
          }

          .item-content {
            overflow: hidden;
            width: 95%;
            height: 18px;
            font-size: 16px;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: rgba(16, 16, 20, 0.95);
          }
        }

        .item-w164 {
          width: 164px;
        }
      }

      .card2 {
        display: flex;
        justify-content: space-between;
        width: 100%;
        flex-direction: column;
        gap: 8px;
      }

      .row-title {
        height: 22px;
        font-size: 14px;
        color: rgba(25, 25, 48, 0.45);
        line-height: 22px;
      }

      .row-content {
        font-size: 16px;
        color: rgba(16, 16, 20, 0.95);
        line-height: 24px;
        word-break: break-all;
      }
    }

    .button-group {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // width: 188px;
      gap: 12px;
      margin: 0 auto;
    }
  }
</style>
